<template>
    <div style="min-height: 30vh;background: white;" ref="comment"><!--课程评价-->
      <div class="list-box">
          <div class="item-box" @click="toCre(item.status, item.aeItmId, item.aeId, item.aeModId, item)" v-for="(item, index) in certificateList" :key="index">
            <div>
              <span v-if="item.status===1">{{ $t('Evaluated') }}</span>
              <span v-if="item.status===0" style="color: #F59A23;">{{ $t('Not_evaluated') }}</span>
              <span>{{item.aeTitle || '--'}}</span>
            </div>
            <van-icon name="arrow" color="#8A8A8A"/>
          </div>
          <!--暂无数据-->
          <div v-if="certificateList.length === 0" class="white-bg" style="height: 300px;">
            <div class="box-table" style="width:100%;height:100%;">
              <div class="box-table-cell" style="text-align: center;">
                <div class="no-data">
                  <img src="../../../static/images/no-data.png" alt />
                  <p class="color999">{{ $t("no_data") }}</p>
                </div>
              </div>
            </div>
          </div>
      </div>
      <van-popup v-model="show">
        <div @click="show=false" class="myCertifica">
          <img :src="iframeSrc">
        </div>
      </van-popup>
    </div>
</template>

<script>
import { Popup, ImagePreview, Notify } from 'vant';
export default {
    name: 'MyCertificate',
    components: {Popup, ImagePreview, [Notify.Component.name]: Notify.Component},
    data() {
        return {
            id: this.$route.query.id,
            certificateList: [],
            iframeSrc: '',
            show: false
        };
    },
    props: [],
    methods: {
        getFreshDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/eva/list`,
                params: {
                    pageNo: 1,
                    pageSize: 999,
                    itmId: this.$route.query.id,
                    tkhId: this.$route.query.appTkhId,
                    mobileInd: 1
                }
            }).then((res) => {
                console.log(res.data);
                this.certificateList = res.data.results;
            });
        },
        toCre(status, aeItmId, aeId, aeModId, item) {
            console.log('certId', aeId, aeModId, status, item);
            if (this.$route.query.appTkhId) {
                // status： 0未评价, 1已评价
                // 如果未评价，判断是否超过提交时间
                if ((item.status === 0 && new Date().getTime() < new Date(item.aeEndTime).getTime()) || item.status === 1) {
                    this.$router.push({
                        path: '/certifiedDetail/' + aeModId + '/eva' + '?status=' + status + '&aeId=' + aeId + '&aeItmId=' + aeItmId
                    });
                } else {
                    Notify({
                        message: this.$t('questionnaire_submission_time'),
                        color: '#fff',
                        background: '#D9001B'
                    });
                }
            } else {
                Notify({
                    message: this.$t('Please_register_first'),
                    color: '#fff',
                    background: '#D9001B'
                });
            }
        }
    },
    mounted() {
        this.getFreshDetail();
    },
    watch: {
    }
};
</script>

<style scoped lang="less">
  .list-box{
    background: #fff;
    padding: 0 20px;
    margin-top: 10px;
    .item-box{
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
</style>
